<template>
  <!-- 轮播图 -->
  <div class="banner"
       :style="{padding:`0 ${formData.padding}px`}">
    <div class="banner--item"
         :class="[ formData.angle,formData.imageStyle]"
         v-for="(item,i) of formData.banners"
         :key="i"
         :style="[getBg(item.img)]">
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class BannerPreview extends Vue {
  @Prop()
  formData;

  getBg(url) {
    return {
      backgroundImage: `url(${url})`,
    };
  }
}
</script>
  
<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 150px;

  &--item {
    width: 100%;
    height: inherit;

    &.fillet {
      border-radius: 15px;
      overflow: hidden;
    }

    &.projection {
      box-shadow: 3px 3px 10px rgba($color: #000, $alpha: 0.5);
    }
  }
}
</style>
